<template>
    <div :class="classes" :style="styles" @click="back">
        <slot>
            <div :class="innerClasses">
                <i class="icon icon-arrow-up"></i>
            </div>
        </slot>
    </div>
</template>

<script>
import { prefixCls } from "../prefix";
import { scrollTop } from "../../utils/shared";
import './backTop.css'
export default {
    name: `${prefixCls}BackTop`,
    data() {
        return {
            prefixCls: prefixCls,
            backTop: false,
        };
    },
    props: {
        height: {
            type: Number,
            default: 400,
        },
        bottom: {
            type: Number,
            default: 30,
        },
        right: {
            type: Number,
            default: 30,
        },
        duration: {
            type: Number,
            default: 1000,
        },
    },
    mounted() {
        window.addEventListener("scroll", this.handleScroll, false);
        window.addEventListener("resize", this.handleScroll, false);
    },
    beforeDestroy() {
        window.removeEventListener("scroll", this.handleScroll, false);
        window.removeEventListener("resize", this.handleScroll, false);
    },
    computed: {
        classes() {
            return [
                `${prefixCls}`,`${prefixCls}-back-top`,
                {
                    [`${prefixCls}-back-top-show`]: this.backTop,
                },
            ];
        },
        styles() {
            return {
                bottom: `${this.bottom}px`,
                right: `${this.right}px`,
            };
        },
        innerClasses() {
            return `${prefixCls}-back-top-inner`;
        },
    },
    methods: {
        handleScroll() {
            this.backTop = window.pageYOffset >= this.height;
        },
        back() {
            const sTop = document.documentElement.scrollTop || document.body.scrollTop;
            scrollTop(window, sTop, 0, this.duration);
            this.$emit("on-click");
        },
    },
};
</script>
